<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="hed">
          <div class="i">
            <i class="el-icon-arrow-left" @click="$router.replace('/')"></i>
            <i class="iconfont icon-home" @click="$router.replace('/')"></i>
          </div>
          <p>购物车</p>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="langth">
        <div class="same">
          <span>共{{ shop_list.length }}件商品</span>
        </div>
      </div>
      <div class="same">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="cart">
            <div class="til">
              <div class="cart_same" @click="checkAll">
                <van-checkbox
                  v-model="checked"
                  checked-color="#ee0a24"
                  :disabled="shop_list.length == 0"
                  ref="CheckAll"
                  >萌宠乐园</van-checkbox
                >
              </div>
            </div>
            <div class="cart_same">
              <div class="shopCart">
                <div class="shop">
                  <van-checkbox-group
                    v-model="result"
                    ref="checkboxGroup"
                    v-if="shop_list.length"
                  >
                    <div
                      class="van-checkbox-cell-group"
                      v-for="(item, index) in shop_list"
                      :key="item.id"
                    >
                      <van-checkbox
                        :name="item"
                        @click="checkbox"
                        ref="checkbox"
                        checked-color="#ee0a24"
                        class="checkbox"
                      ></van-checkbox>
                      <van-swipe-cell>
                        <van-card
                          class="bg"
                          center
                          :num="item.listCount"
                          :price="
                            (item.listZong = item.listCount * item.listPrice)
                          "
                          :title="item.listName"
                          :value="item.listPrice + '元'"
                          :thumb="'http://192.168.10.23:8888/' + item.listUrl"
                          is-link
                        >
                          <div slot="num">
                            <van-stepper
                              v-model="item.listCount"
                              @change="onStepper(index, item.listCount)"
                              @plus="onJia(item.id)"
                              @minus="onJian(item.id)"
                            />
                          </div>
                        </van-card>

                        <template #right>
                          <van-button
                            square
                            type="danger"
                            text="删除"
                            @click="ListDel(item.id)"
                          />
                        </template>
                      </van-swipe-cell>
                    </div>
                  </van-checkbox-group>
                  <van-empty description="购物车空啦" v-else />
                </div>
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </div>
    </div>

    <div class="footer">
      <van-submit-bar
        :price="totals * 100"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { ShopCartList, ShopCartDel, CountJia, CountJian } from "@/api/index";
export default {
  components: {},
  data() {
    return {
      result: [], // 选中数据
      checked: false, // 全选
      totals: 0, // 总计
      checkall: true,
      shop_list: [],
      isLoading: false,
    };
  },
  created() {
    this.ShopCartList();
  },
  watch: {
    // 监听选中单元，判断全选控件
    result(val) {
      // console.log(val);
      // 如果有禁止选中的，则忽略它

      let count = 0;
      for (let i = 0; i < this.shop_list.length; i++) {
        if (
          this.$refs.checkbox[i].disabled === true &&
          this.$refs.checkbox[i].checked === false
        ) {
          count++;
        }
      }
      if (val.length !== this.shop_list.length - count) {
        this.checked = false;
      } else {
        this.checked = true;
      }
    },
  },
  mounted() {},
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.ShopCartList();
        this.isLoading = false;
      }, 1000);
    },
    ShopCartList() {
      let usersId = this.$store.state.user.id;
      ShopCartList(usersId).then((res) => {
        this.shop_list = res.data.data;
        // console.log(res);
      });
    },
    ListDel(id) {
      ShopCartDel(id).then((res) => {
        // console.log(res);

        this.ShopCartList();
        Toast("删除成功");
      });
    },
    onStepper(index, count) {
      // console.log(id);
      this.shop_list[index].listCount = count;
      this.shop_list[index].listZong = this.shop_list[index].listPrice * count;
      this.totalsNum();
    },
    onJia(id) {
      CountJia(id).then((res) => {
        // console.log(res);
      });
    },
    onJian(id) {
      CountJian(id).then((res) => {
        // console.log(res);
      });
    },
    onSubmit() {
      if (this.result.length == 0) {
        Toast("请选择商品");
      } else {
        this.$router.push({
          path: "/Orders",
        });
        localStorage.setItem("list", JSON.stringify(this.result));
        localStorage.setItem("totals", this.totals);
      }
    },
    checkAll() {
      // 点击可切换模式
      this.checked = !this.checked;
      // 全选，并且跳过默认禁止点击的选框
      // console.log(this.$refs.CheckAll.disabled);
      if (this.$refs.CheckAll.disabled) {
        return false;
      } else {
        this.$refs.checkboxGroup.toggleAll(this.checked);
        this.totalsNum();
      }
    },
    checkbox() {
      this.totalsNum();
    },
    totalsNum() {
      // 计算总计
      this.totals = 0;
      this.result.forEach((item) => {
        this.totals += parseFloat(item.listZong);
      });
    },
    // 保留两位小数
    fmoney(str, n) {
      if (str == null) {
        str = "0.00";
      } else if (+str === 0) {
        str = "0.00";
      } else if (str === "") {
        str = "0.00";
      } else {
        n = n > 0 && n <= 20 ? n : 2;
        str = parseFloat((str + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      }
      return str;
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 8vh;
  background: transparent;
  z-index: 1;
  width: 100%;
  top: 0;
  position: fixed;

  background: rgb(255, 255, 255);

  .hed {
    width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    .i {
      display: flex;
      align-items: center;
      i {
        margin: 0 2vw;
      }
      .icon-home {
        font-size: 22px;
      }
    }
    p {
      width: 58vw;
    }
  }
}
.main {
  width: 100%;
  height: auto;
  margin-top: 8vh;
  background: rgb(235, 235, 235);
  color: #333;
  .langth {
    width: 100%;
    height: 6vh;
    background: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 2vh;
    span {
      font-size: 13px;
      color: #444;
    }
  }
  .cart {
    width: 100%;
    height: 80vh;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ccc;
    .til {
      width: 100%;
      height: 7vh;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
    }
    .shopCart {
      width: 100%;
      height: auto;
      .shop {
        width: 100%;
        height: 20vh;
        // background: rgb(255, 0, 0);
        margin-top: 2vh;

        .van-checkbox-cell-group {
          width: 100%;
          display: flex;
          .van-checkbox {
            width: 10vw;
          }
          .bg {
            background: rgba(255, 255, 255, 0);
          }
        }
      }
    }
    .cart_same {
      width: 90%;
      margin: 0 auto;
    }
  }
}
.footer {
  width: 100%;
  height: 10vh;
  background: #fff;
}
</style>
